<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" @submit.native.prevent>
      <el-form-item label="团队" prop="groupId">
        <el-input v-model="queryParams.groupId" placeholder="" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="层级" prop="level" label-width="68px">
        <el-input v-model="queryParams.level" placeholder="" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="创建时间">
        <el-date-picker v-model="dateRange" style="width: 340px" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
      </el-form-item>
    </el-form>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleUpdate">查看层级汇总数据</el-button>
      </div>
      <div class="topAll">
        <div class="topAll-item" v-for="item,index in groupData" :key="index">
          <span class="title">{{item.name}}
            <el-popover placement="top-start" title="提示" width="200" trigger="hover" content=" 账户余额跟时间筛选无联系,数据为当前截止用户个人账户余额">
              <span style="font-size: 10px;" v-if="item.name == '账户余额'" slot="reference">(*提示)</span>
            </el-popover>
          </span>
          <span class="value">{{item.value?item.value:0}}</span>
        </div>
      </div>
    </el-card>

    <el-table :height="tableHeight" v-loading="loading" :data="list" stripe border>
      <el-table-column label="序号" type="index" align="center" width="60" />
      <el-table-column label="推荐人UID号" prop="inviteCode" align="center" width="180" />
      <el-table-column label="UID号" prop="id" align="center" width="120" />
      <el-table-column label="名称" prop="name" align="center" width="120" />
      <el-table-column label="层级" prop="level" align="center" sortable>
      </el-table-column>
      <el-table-column label="现金流水总和" prop="orderNum" width="120" align="center" />
      <el-table-column label="金积分流水总和" prop="goldAmount" width="120" align="center" />
      <el-table-column label="银积分流水总和" prop="silverAmount" width="120" align="center" />

      <el-table-column label="入金总和" prop="cashEntry" align="center" />
      <el-table-column label="出金总和" prop="cashOut" align="center" />
      <el-table-column label="账户余额" prop="cashAmount" align="center" />
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <div v-if="open">
      <z-dialog :title="title" :visible.sync="open">
        <group-list-level :maxLevel="this.teamInfo.maxLevel" :groupId="this.queryParams.groupId "></group-list-level>
      </z-dialog>
    </div>

  </div>
</template>

<script>
import { listGroupInfoSingle, listGroupListLevelSingle, listGroupInfoLevelSingle } from "@/api/marketing/team.js";
import groupListLevel from "./groupListLevel.vue";

export default {
  name: "TeamSingle", //团队
  components: { groupListLevel },
  data() {
    return {
      // 列表数据
      list: [],
      dialogVisible: false,
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      timer: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      teamInfo: { teamName: undefined, id: undefined, maxLevel: 0 },
      pageNum: 1,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: this.global.pageSize,
      },

      dateRange: [],
      // 表单参数
      form: {},

      // 团队名称、母GP号
      groupData: [
        { name: '现金流水总和', value: 0 },
        { name: '金积分流水总和', value: 0 },
        { name: '银积分流水总和', value: 0 },
        { name: '入金总和', value: 0 },
        { name: '出金总和', value: 0 },
        { name: '账户余额', value: 0 },
      ],
      teamList: []
    };
  },
  computed: {
    tableHeight() {
      return 'calc(100vh - 430px)'
    }
  },
  watch: {

    "queryParams": {
      deep: true,
      handler: function (newV, oldV) {
        if (this.pageNum == newV.pageNum) {
          this.getList();
          this.getTeamInfo();
        } else {
          this.pageNum = newV.pageNum;
        }
      },
    },

    dateRange(newV, oldV) {
      if (newV.length >= 2) {
        this.queryParams.beginTime = String(newV[0]);
        this.queryParams.endTime = String(newV[1]);
        this.getList();
        this.getTeamInfo();
      }
    }
  },

  created() {
    // this.getList();
    // this.getTeamInfo();
  },

  methods: {
    getList() {
      this.loading = true;
      listGroupListLevelSingle(this.queryParams).then((response) => {
        this.list = response.data;
        this.total = response.total;
        this.loading = false;
      });
    },
    //获取团队汇总
    getTeamInfo() {
      listGroupInfoSingle(this.queryParams).then((response) => {
        this.teamInfo = response.data;
        if (this.teamInfo != null) {
          this.groupData[0].value = this.teamInfo.orderNum;//订单总和
          this.groupData[1].value = this.teamInfo.goldAmount;//金积分总和
          this.groupData[2].value = this.teamInfo.silverAmount;//银积分总和
          this.groupData[3].value = this.teamInfo.cashEntry;//入金总和
          this.groupData[4].value = this.teamInfo.cashOut;//出金总和
          this.groupData[5].value = this.teamInfo.cashAmount;//账户余额
        }

      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
      this.getTeamInfo();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 查看按钮操作 */
    handleUpdate(row) {
      this.open = true;
      this.title = '层级数据';
      // this.form = row;
    },
  },
};
</script>
<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;
}
.topAll {
  display: flex;
  flex: 1;
  &-item {
    width: 16.6%;
    display: flex;
    text-align: center;
    flex-direction: column;
    .label {
      line-height: 40px;
    }
    .value {
      font-size: 20px;
    }
  }
}
.el-dialog-div {
  height: 70vh;
  overflow: auto;
}
</style>
